const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const mode = /--mode\s+production/.test(process.argv.join(' ')) ? 'production' : 'development';
const public = path.resolve(__dirname, 'client');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: 'js/[name].[hash].js',
        path: public
    },
    devtool: mode == 'production' ? '' : 'inline-source-map',
    module: {
        rules: [{
            test: /\.s?css$/,
            use: [{
                loader: MiniCssExtractPlugin.loader,
                options: {
                    publicPath: '../',
                    hmr: process.env.NODE_ENV === 'development',
                }
            }, {
                loader: 'css-loader',
                options: {}
            }, {
                loader: 'sass-loader',
                options: {}
            }]
        }, {
            test: /\.(png|jpg|gif|ico|jpeg|svg)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'img'
                }
            }]
        }]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/[name].[hash].css',
            chunkFilename: '[id].css',
            ignoreOrder: false
        }),
        new HtmlWebpackPlugin({
            title: 'h5-cli',
            template: 'src/index.html'
        })
    ],
    devServer: {
        contentBase: public,
        compress: true,
        clientLogLevel: 'none',
        noInfo: true,
        open: true,
        port: 8888
    },
}